<%@page import="cn.edu.pzhu.javaweb.pojo.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="menu.jsp"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件列表</title>
<style>
    .pagination {
        margin: 20px 0;
        text-align: center;
    }
    .pagination a {
        display: inline-block;
        padding: 8px 16px;
        margin: 0 4px;
        text-decoration: none;
        border: 1px solid #ddd;
        color: #007bff;
        border-radius: 4px;
    }
    .pagination a:hover {
        background-color: #e9ecef;
    }
    .pagination .current {
        background-color: #007bff;
        color: white;
        border: 1px solid #007bff;
    }
    .pagination .disabled {
        color: #6c757d;
        pointer-events: none;
        background-color: #fff;
        border-color: #dee2e6;
    }
    .page-info {
        text-align: center;
        margin: 10px 0;
        color: #666;
    }
    .page-size {
        text-align: center;
        margin: 10px 0;
    }
    .page-size select {
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
</style>
</head>

<body>
	<h1 class="title">文件列表</h1>
	
	<!-- 分页信息显示 -->
	<div class="page-info">
	    共 ${totalRecords} 条记录，第 ${currentPage}/${totalPages} 页
	</div>
	
	<!-- 每页显示数量选择 -->
	<div class="page-size">
	    <form id="pageSizeForm" method="get" action="showfiles" style="display: inline;">
	        每页显示：
	        <select name="num" onchange="changePageSize(this.value)">
	            <option value="5" ${pageSize == 5 ? 'selected' : ''}>5</option>
	            <option value="10" ${pageSize == 10 ? 'selected' : ''}>10</option>
	            <option value="20" ${pageSize == 20 ? 'selected' : ''}>20</option>
	            <option value="50" ${pageSize == 50 ? 'selected' : ''}>50</option>
	        </select>
	        <input type="hidden" name="page" value="1">
	    </form>
	</div>
	
	<table border="1">
        <tr>
            <th>序号</th>
            <th>分享用户</th>
            <th>文件名称</th>
            <th>文件类型</th>
            <th>文件下载</th>
            <th>公开时间</th>
            <th>推荐指数</th>
            <th>文件描述</th>
            <th>操作</th>
        </tr>
        
        <c:forEach items="${fileList}" var="file" varStatus="status">
            <tr>
                <!-- 计算当前页的序号 -->
                <td>${(currentPage-1)*pageSize + status.count}</td>
                <!-- 分享用户 -->
                <td>${file.username}</td>
                <!-- 文件名称 -->
                <td>${file.filename}</td>
                <!-- 文件类型 -->
                <td>${file.classification}</td>
                <!-- 文件下载超链接 -->
                <td><a href="${file.filepath}">下载</a></td>
                <!-- 公开时间 -->
                <td>${file.releasedate}</td>
                <!-- 推荐指数 -->
                <td>${file.rating}</td>
                <!-- 文件描述 -->
                <td>${file.description}</td>
                <!-- 操作链接 -->
                <td>
                    <a href="">删除</a>
                    <a href="">编辑</a>
                </td>
            </tr>
        </c:forEach>
    </table>
    
    <!-- 分页导航 -->
    <div class="pagination">
        <!-- 首页 -->
        <c:if test="${currentPage > 1}">
            <a href="showfiles?page=1&num=${pageSize}">首页</a>
        </c:if>
        <c:if test="${currentPage == 1}">
            <a class="disabled">首页</a>
        </c:if>
        
        <!-- 上一页 -->
        <c:if test="${currentPage > 1}">
            <a href="showfiles?page=${currentPage-1}&num=${pageSize}">上一页</a>
        </c:if>
        <c:if test="${currentPage == 1}">
            <a class="disabled">上一页</a>
        </c:if>
        
        <!-- 页码数字 -->
        <c:forEach begin="1" end="${totalPages}" var="i">
            <c:if test="${i >= currentPage-2 && i <= currentPage+2}">
                <c:if test="${i == currentPage}">
                    <a class="current">${i}</a>
                </c:if>
                <c:if test="${i != currentPage}">
                    <a href="showfiles?page=${i}&num=${pageSize}">${i}</a>
                </c:if>
            </c:if>
        </c:forEach>
        
        <!-- 下一页 -->
        <c:if test="${currentPage < totalPages}">
            <a href="showfiles?page=${currentPage+1}&num=${pageSize}">下一页</a>
        </c:if>
        <c:if test="${currentPage == totalPages}">
            <a class="disabled">下一页</a>
        </c:if>
        
        <!-- 末页 -->
        <c:if test="${currentPage < totalPages}">
            <a href="showfiles?page=${totalPages}&num=${pageSize}">末页</a>
        </c:if>
        <c:if test="${currentPage == totalPages}">
            <a class="disabled">末页</a>
        </c:if>
    </div>
    
    <!-- 跳转到指定页 -->
    <div style="text-align: center; margin: 20px 0;">
        <form method="get" action="showfiles" style="display: inline;">
            跳转到第 
            <input type="number" name="page" min="1" max="${totalPages}" value="${currentPage}" 
                   style="width: 60px; padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
            页
            <input type="hidden" name="num" value="${pageSize}">
            <input type="submit" value="跳转" style="padding: 5px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
        </form>
    </div>
    
    <script>
        // 改变每页显示数量
        function changePageSize(pageSize) {
            document.getElementById('pageSizeForm').submit();
        }
        
        // 页面加载完成后执行
        window.onload = function() {
            // 如果没有数据，显示提示信息
            if (${empty fileList}) {
                var table = document.querySelector('table');
                var newRow = table.insertRow(-1);
                var cell = newRow.insertCell(0);
                cell.colSpan = 9;
                cell.style.textAlign = 'center';
                cell.style.padding = '20px';
                cell.style.color = '#666';
                cell.innerHTML = '暂无文件数据';
            }
        };
    </script>
</body>
</html>